<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="msgDiv"></div>
    <input type="text" id="text">
    <input type="button" value="发送" onclick="send()">

    <script>
        //连接服务器，得到websocket实例
        var websocket = new WebSocket("ws://127.0.0.1:8088");
        //websocket状态：0----实例化websocket完成，连接没建立，正在建立连接
        //1--------连接成功建立  2---------连接正在关闭
        //3--------连接已经关闭

        //连接建立成功触发
        websocket.onopen = function onOpen(openEvt) {
            console.log(websocket.readyState);
        }
        websocket.onerror = function (){};
        websocket.onclose = function (){};
        //消息到达
        websocket.onmessage = function (back){
            // console.log(back);
            var divObj = document.getElementById("msgDiv");
            //back.data得到服务器发送给客户端的数据
            divObj.innerHTML += "<div>"+back.data+"</div>";
        }

        function send(){
            var msg = document.getElementById("text").value;
            //向服务器发送消息
            websocket.send(msg);
        }
    </script>
</body>
</html>